<template>
  <div class="insert-card-wrap">
    <img
      v-lazy="picUrl"
      class="pic-insert-card"
      alt=""
      @click.stop="handleClick"
    />
  </div>
</template>

<script>
import { goLink, http2https, formatImgUrl } from '@/utils/util';

export default {
  name: 'insertCard',
  props: {
    insertCardObj: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number,
      default: 0
    }
  },
  computed: {
    picUrl() {
      const width = 351; // 根据iOS最大宽度换算而来 （120/375）* 414
      const height = 94;
      let { imgUrl } = this.insertCardObj || {};
      if (imgUrl) {
        imgUrl = formatImgUrl(imgUrl.split(',')[0], width, height);
        return http2https(imgUrl);
      }
      return '';
    },
    adId() {
      return this.insertCardObj.id || '';
    }
  },
  methods: {
    // 纯图片插卡位点击
    handleClick() {
      const { ringshopLinkUrl } = this.insertCardObj || {};
      if (ringshopLinkUrl) {
        goLink(ringshopLinkUrl, (params, path) => {
          if (path === 'index') {
            return;
          }
          this.$router.push({
            path,
            query: {
              ...params,
              shopId: this.$route.query.shopId
            }
          });
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.insert-card-wrap {
  margin-bottom: 10px;
  .pic-insert-card {
    width: 355px;
    height: 114px;
    border-radius: 6px;
    display: block;
    margin: 0 auto;
  }
}
</style>
